<template>
    <div class="expanding-cards-page">
        <div class="container">
            <div
                class="panel"
                :class="{ active: item.isActive }"
                :style="{ backgroundImage: 'url(' + item.img + ')' }"
                v-for="(item, index) in cards"
                :key="item.id"
                @click="handleCardClick(index)"
            >
                <h3>{{ item.text }}</h3>
            </div>
        </div>
        <footer>
            Fork From <span>❤️</span>
            <a
                class="rainbow-link"
                href="https://50projects50days.com/projects/expanding-cards/"
                >50projects50days</a
            >❤️
        </footer>
    </div>
</template>

<script setup lang="ts">
import { reactive } from "@vue/reactivity";

// * 此处必须要使用 reactive 才能通过数据变化改变样式
const cards = reactive([
    {
        id: 1,
        img: "https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
        text: "Explore The World",
        isActive: true,
    },
    {
        id: 2,
        img: "https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
        text: "Wild Forest",
        isActive: false,
    },
    {
        id: 3,
        img: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80",
        text: "Sunny Beach",
        isActive: false,
    },
    {
        id: 4,
        img: "https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80",
        text: "City on Winter",
        isActive: false,
    },
    {
        id: 5,
        img: "https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
        text: "Mountains - Clouds",
        isActive: false,
    },
]);

const handleCardClick = (index: number): void => {
    let activeCardIndex = cards.findIndex((item) => {
        return item.isActive === true;
    });
    cards[activeCardIndex].isActive = false;
    cards[index].isActive = true;
};
</script>

<style lang="scss" scoped>
.expanding-cards-page {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}
.container {
    display: flex;
    width: 90vw;
}

.panel {
    // * 背景以资源中间固定不缩放
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    height: 80vh;
    border-radius: 50px;
    color: #fff;
    cursor: pointer; // 提示效果
    flex: 0.5;
    margin: 10px;
    position: relative;

    // * 过渡效果 （flex: 0.5 <-> 5）
    transition: flex 0.7s ease-in;
}
.panel.active {
    flex: 5;
}

.panel h3 {
    font-size: 24px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    margin: 0;
    opacity: 0;
}
.panel.active h3 {
    opacity: 1;

    // * 过渡效果 （opacity: 0 <-> 1）
    transition: opacity 0.3s ease-in 0.4s;
}

footer {
    position: fixed;
    bottom: 24px;
    color: $theme-color;
}
</style>
